<!--待办列表  这个应该是父组件  有其他组件来调用它 -->
<template>
    <div >
        <div v-if="hasData">
            <div v-for="item in data"  :key="item.name" >
                <!--从服务端获取的数据-->
                <div style="margin-bottom:5px;">
                    <div  class="task-title">
                        <el-row>
                            <el-col :span="22">
                                <!--任务完成时间的判定-->
                                <div :class="item.type == 1?'proc-ftime-type1': (item.type == 2? 'proc-ftime-type2':'proc-ftime-type3')"  ></div>

                                <div class="task-container" >
                                    <!--标题-->
                                    <div  class="flow-title">
                                      <!-- gotoDetails -->
                                        <span @click="editProcInst(item)"  style="cursor:pointer;" >{{item.folio}}</span>
                                    </div>

                                    <div class="task-operate" >
                                        <span class="font-over task-fun" @click="editProcInst(item)" ><img src="@/assets/img/details.png" /> {{$t('ndt.details')}}</span>
                                        <!-- <span class="font-over task-fun" @click="gotoLogs(item)" ><img src="@/assets/img/log.png" /> {{$t('ndt.log')}}</span>
                                        <span class="font-over task-fun" @click="gotoFiles(item)" ><img src="@/assets/img/file.png" /> {{$t('ndt.file')}}</span>
                                        <span class="font-over task-fun" ><img src="@/assets/img/forward.png" /> {{$t('ndt.send')}}</span> -->
                                        <span  @click="showProcPic(item)" class="task-fun" ><i class="fa fa-file-powerpoint-o " ></i> <font class="font-over" >{{$t('ndt.proc_pic')}}</font></span>

                                        <span class="font-over task-span">|</span>
                                        <span v-if="item.showSomeInfo">
                                            <!--上一审批人-->
                                            <span>{{$t('ndt.last_approve_man')}}:{{item.lastApproveMan}}</span>
                                            <!-- 审批意见 -->
                                            <span v-if="item.approveSuggest==1">{{$t('ndt.approve_man')}}: 同意</span>
                                            <span else>{{$t('ndt.approve_suggest')}}: {{item.lastApproveSuggest}}</span>
                                            <!-- 审批时间 -->
                                            <span>{{$t('ndt.approve_time')}}:{{item.lastApproveTime}}  </span>
                                            <span>
                                                <!--展示内容-->
                                                <el-popover placement="top-start" key="item.pscId" width="700" trigger="hover" class="flowLog"   >
                                                    <el-button slot="reference"  size="small" class="btn-second btn-popover btn-proc-open"  >
                                                        <i class="el-icon-arrow-down"></i>
                                                    </el-button>

                                                    <el-row class="table-body">
                                                        <el-table :data="item.showProcLogs"  class="no_line" fixed  ref="flowLogTable" >
                                                            <el-table-column prop="actName" :label="$t('ndt.actor_name')" ></el-table-column>
                                                            <el-table-column  :label="$t('ndt.deal_man')" >
                                                                <template slot-scope="scope"  >
                                                                    {{ '['+scope.row.approverAccount+']' + scope.row.approverChsName}}
                                                                </template>
                                                            </el-table-column>
                                                            <el-table-column :formatter="transDate" prop="finishDate" :label="$t('ndt.deal_time')" ></el-table-column>
                                                            <el-table-column prop="comment" :label="$t('ndt.deal_suggest')" ></el-table-column>
                                                        </el-table>
                                                    </el-row>
                                                    <el-row class="table-bottom" >
                                                        <el-pagination
                                                            @current-change="changeLogPage($event,item)"
                                                            @prev-click="prePage($event,item)"
                                                            @next-click="nextPage($event,item)"
                                                            :current-page="item.logIndex"
                                                            :page-sizes="[5]"
                                                            :page-size="item.logSize"
                                                            layout="total, sizes, prev, pager, next, jumper"
                                                            :total="item.logTotal">
                                                        </el-pagination>
                                                    </el-row>
                                                </el-popover>

                                            </span>
                                        </span>

                                    </div>
                                </div>
                            </el-col>

                            <el-col :span="2">
                                    <div v-if="item.iconDown" @click="showDetails(item)" class="icon-div" >
                                        <i  class="el-icon-arrow-down icon-down-up"    ></i>
                                    </div>

                                    <div v-else @click="showDetails(item)" class="icon-div" >
                                        <i  class="el-icon-arrow-up icon-down-up"  ></i>
                                    </div>
                            </el-col>
                        </el-row>

                    </div>
                    <!--折叠框内容-->
                    <el-row name="contentid"  v-show="item.contentidshow"  >
                        <div class="flow-collapse-container">
                            <el-form  label-width="120px">
                                <!-- <div style="width:5px;background-color:#EE7200;height:170px; float:left;"></div> -->
                                <el-row class="flow-collapse-content"  >
                                    <!--审批意见-->
                                    <el-col  :span="3">
                                        <el-form-item label-width="15px"  >
                                            <div>
                                                <el-radio @change="triggerAgree(item)"  v-model="item.determinate" label="1" name="determinate">{{$t('ndt.aggre')}}</el-radio>
                                            </div>
                                            <div v-if="item.showBack">
                                                <el-radio @change="triggerBack(item)"  v-model="item.determinate" label="2" name="determinate">{{$t('ndt.reback')}}</el-radio>
                                            </div>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="10">
                                        <el-row>
                                            <!--下一环节-->
                                            <el-col>
                                                <el-form-item class="form-item1" :label="$t('ndt.next_actor')">
                                                    <el-select @change="changeAct($event,item)" v-model="item.next_actor" size="small" style="margin-left:-12px;" >
                                                        <el-option v-for="(i, index) in item.actOptions" :label="i.actName" :key="index" :value="i.actMetadata" >
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                            <!--下一步处理人-->
                                            <el-col >
                                                <el-form-item class="form-item1" :label="$t('ndt.next_deal_man')" style="margin-top:-20px;">

                                                    <personSelect :value="item.personOptions.join(',')"  modal="false"  style=" position: relative;left:-12px;"  v-bind:multiple="true" :id="item.nexeManId" ></personSelect>
                                                    <el-checkbox-group v-else-if="item.isEnd == false && item.determinate == 1 && !item.isReselFastApprove" v-model="item.deal_man">
                                                        <el-checkbox class="chk-br"  v-for="i in item.personOptions" :label="i" :key="i" >{{i}}</el-checkbox>
                                                    </el-checkbox-group>
                                                    <div v-else-if="item.determinate == 1 && item.isEnd == true" >流程结束</div>
                                                    <div v-else>{{item.showBackMan}}</div>
                                                    <!-- <personSelect   modal="false"  style=" position: relative;left:-12px;"  v-bind:multiple="true" :id="item.nexeManId" ></personSelect> -->

                                                </el-form-item>
                                            </el-col>
                                            <!--抄送-->
                                            <el-col >
                                                <el-form-item class="form-item1" :label="$t('ndt.write_send')" style="margin-top:-20px;">
                                                    <!-- <el-input size="small" class="form-input" >
                                                        <el-button slot="append" icon="el-icon-plus"></el-button>
                                                    </el-input> -->
                                                    <personSelect size="small" modal="false"  style="position: relative;left:-12px;"   v-bind:multiple="true" :id="item.sendManId" ></personSelect>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-col>

                                    <el-col :span="9" style="position: relative;">
                                        <el-row>
                                            <el-col :span="24">
                                                <el-form-item class="form-item1" :label="$t('ndt.approve_suggest')">
                                                    <el-input type="textarea" v-model="item.approveSuggest" style="margin-left:-10px;" ></el-input>
                                                    <br />
                                                    <div class="flow_approve" style="margin-left:-10px;" >
                                                        <span @click="selectText($event,item)" class="flow-collapse-deal1"  >同意!</span>
                                                        <span @click="selectText($event,item)" class="flow-collapse-deal2" >同意，请快速处理，谢谢!</span>
                                                        <span @click="selectText($event,item)" class="flow-collapse-deal3" >退回!</span>
                                                    </div>
                                                    <div class="flow_approve" style="margin-top:-10px;margin-left:-10px;">
                                                        <span  @click="selectText($event,item)" class="flow-collapse-deal4" >不同意，请确认材料无误后再申请！</span>
                                                    </div>
                                                </el-form-item>
                                            </el-col>


                                        </el-row>
                                    </el-col>

                                    <el-col :span="1">
                                        <!--提交按钮-->
                                        <el-col :span="24" >
                                            <el-button class="btn-default" @click="commitProc(item)"
                                            style="height:115px;width: 80px;" size="small">
                                            {{$t('ndt.commit')}}
                                            </el-button>
                                        </el-col>
                                    </el-col>

                                </el-row>

                            </el-form>

                        </div>
                    </el-row>

                </div>
            </div>
        </div>
        <div v-else style="margin-left: 1.5%;">暂无待办数据</div>
        <div id="load" style="height:100px"></div>

         <!-- 附件的对话框 -->
         <el-dialog :title="$t('ndt.file')"
            :class="changeCollapse?'dialog-open':'dialog-shrink'"
            width="60%"
            :append-to-body="true"
            :visible.sync="showDialog" >
            <download :showBrand="false" :props="fileProps"  :datalist="fileList" :showDel="false" :showUpload="true" :showLoading="false" ></download>
            <div style="text-align: center;">
                <el-button class="btn-second" size="small" @click="closeDialog" >{{$t('cm.close')}}</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

import need_deal_list from './js/need_deal_list.js'
export default need_deal_list
</script>


<style  scoped>
    .form-item1>.el-form-item__label{
        padding-right:0px !important;
    }
    .task-title{
        margin-left:15px;
        margin-right:15px;height:70px;
        border-top: 1px solid #e7ddce;
        border-bottom: 1px solid #e7ddce;
    }
    .task-title:hover{
        background-color: #fffef6;
    }
    .font-over:hover{
        color:#0069ac;
    }
    .btn-popover.btn-second > .el-icon-arrow-down{
        position:relative;
        right: 7px;
        bottom:5px;
    }
    .flow-title{
        margin-top:12px;font-size: 16px;font-weight: bold;letter-spacing: 1px;
    }
    .flow-title:hover{
        color:#0069ac;
    }
    .task-operate{
        color:#9f988d;
        margin-top:12px;
    }
    .task-fun{
        cursor:pointer;
        margin-left:5px;
        margin-right:5px;
    }
    .task-span{
        margin-left:30px;margin-right:35px;
    }
    .task-span i{
        top: -2px;position: relative;
    }
    .btn-proc-open{
        width: 15px;
        height:15px;
        position: relative;
        top:0;
        padding:0;
    }
    .icon-div{
        height:60px;
        margin-top:6px;
        border-left: 1px solid #F1E3D2;
        text-align: center;
    }
    .icon-down-up{
        top:35%;
        position: relative;
        cursor: pointer;
        display: inline-block;
    }

    .flow_approve span:hover{
        background-color:#f1f1f1;
    }
    /* .flowLog .btn-popover .el-icon-arrow-down:hover{
        background-color:#0069ac;
    }  */

    .flow-collapse-container{
        position:relative;
        margin-left:15px;
        margin-right:15px;
        /* height:140px; */
        padding-bottom: 30px;
        border-bottom: 1px solid #e7ddce;
    }
    .flow-collapse-content{
        padding-top:10px;
        padding-left:5px;
    }
    .flow-collapse-deal1{
        cursor:default;color:#9f988d;border:1px solid #e7ddce;padding-left:10px;padding-right:10px;
    }
    .flow-collapse-deal2{
        cursor:default;color:#9f988d;border:1px solid #e7ddce;padding-left:10px;padding-right:10px;
    }
    .flow-collapse-deal3{
        cursor:default;color:#9f988d;border:1px solid #e7ddce;padding-left:9px;padding-right:9px;
    }
    .flow-collapse-deal4{
        cursor:default;color:#9f988d;border:1px solid #e7ddce;padding-left:10px;padding-right:59px;
    }
    .proc-ftime-type1{
        width:5px;background-color:#EE7200;height:70px; float:left;
    }
    .proc-ftime-type2{
        width:5px;background-color:#ffd900;height:70px; float:left;
    }
    .proc-ftime-type3{
        width:5px;background-color:#8fc31f;height:70px; float:left;
    }
    .task-container{
        margin-left:10px;float:left;
    }
    .btn-proc-open  .el-icon-arrow-down{
        position:relative;font-size:12px;
    }
    .chk-br{
        display:table;
        margin-left:0px;
    }
</style>
